<template>
  <div class="city">
    <city-header class="header"></city-header>
    <city-search :cities="cities" class="search"></city-search>

    <city-list class="cityList" :hotCities="hotCities" :cities="cities" :letters="letters"></city-list>
  </div>
</template>

<script scoped>

import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'

import { getCities } from 'network/city.js'
export default {
  name: 'City',
  data () {
    return {
      cities: {},
      hotCities: [],
      letters: []
    }
  },
  components: {
    CityHeader,
    CitySearch,
    CityList
  },
  created () {
    this.getCityData()
  },
  methods: {
    getCityData () {
      getCities().then((res) => {
        if (res.ret && res.data) {
          const data = res.data
          this.cities = data.cities
          this.hotCities = data.hotCities
          this.letters = Object.keys(this.cities)
        }
      })
    }
  },
  mounted () {

  }
}
</script>

<style lang='less' scoped>
.city{
  position: relative;
  width: 100%;
  height: 100vh;
  .header{
    width: 100%;
    height: @headerHeight;
  }
  .search{
    height: 0.72rem;
  }
  .cityList{
    position: absolute;
    width: 100%;
    height:calc(100% - 1.58rem);
    overflow: hidden;
  }
}
</style>
